<template>
	<div class="user">
		<div class="user_top">
			<van-nav-bar  title="我的" @click-left="$routerBack" />
			<img src="../../assets/user/top_bg.png" alt="">
		</div>
		<div class="user_content">
			<div class="uc_top">
				<div>
					<!-- <img :src="user_info.avatar" alt=""> -->
					<img v-if="user_info.avatar == '/static/wap/images/index/logo.png' || !user_info" class="uct_left" src="../../assets/user/user_head.png" alt="">
					<img class="head" v-else :src="'http://www.facai888008.cn/' + user_info.avatar" alt="">
					<div class="uct_right">
						<div>
							<div>{{user_info.user_login || "正在加载..."}}<img class="vip" src="../../assets/user/v1.png" alt=""></div>
							<img @click="$router.push('/setUp')" class="set" src="../../assets/user/setting.png" alt="">
						</div>
						<p v-if="user_info">Tel：{{user_info.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</p>
						<p v-if="!user_info">Tel：正在加载...</p>
					</div>
				</div>
			</div>
			<div class="uc_bottom">
				<div>
					<p>{{user_info.yj_money || "正在加载..."}}</p>
					<p class="tgsy" @click="$router.push('/promotion')">
						<span>推广收益</span>
						<img src="../../assets/user/tgsy.png" alt="">
					</p>
				</div>
				<div>
					<p>{{user_info.btb_money || "正在加载..."}}</p>
					<p>BTB</p>
				</div>
				<div class="line"></div>
			</div>
		</div>
		
		<div class="mneu_list">
			<div class="ml_item" @click="$router.push(item.url)" v-for="item,index in menu_list">
				<div>
					<img :src="item.ico" alt="">
					<span>{{item.title}}</span>
				</div>
				<img src="../../assets/user/go.png" alt="">
			</div>
		</div>
		
		<button class="logiout" @click="loginout">
			退出登录
		</button>
	</div>
</template>

<script>
	import skgl from '../../assets/user/user_menu/skgl.png'
	import jydd from '../../assets/user/user_menu/jydd.png'
	import aqzx from '../../assets/user/user_menu/aqzx.png'
	import smrz from '../../assets/user/user_menu/smrz.png'
	import yqhy from '../../assets/user/user_menu/yqhy.png'
	import wdtd from '../../assets/user/user_menu/wdtd.png'
	import lxkf from '../../assets/user/user_menu/lxkf.png'
	export default{
		name:'user',
		async created(){
			
			if(!this.$store.state.user_info){
			
				try{
					
					const data = await this.$apis.User.xinxi()
					
					this.user_info = data.data
					
					this.$store.state.user_info = data.data
					
				}catch(e){
					//TODO handle the exception
				}
				
			}else{
				
				this.user_info = this.$store.state.user_info
			}
		},
		data(){
			return{
				user_info:"",
				
				menu_list:[
					{
						ico:skgl,
						title:'收款管理',
						url:'/collectionManagement'
					},
					{
						ico:jydd,
						title:'交易订单',
						url:'/orderDetails'
					},
					{
						ico:aqzx,
						title:'安全中心',
						url:'/security'
					},
					{
						ico:smrz,
						title:'实名认证',
						url:'/authentication'
					},
					{
						ico:yqhy,
						title:'邀请好友',
						url:'/invitation'
					},
					{
						ico:wdtd,
						title:'我的团队',
						url:'/myTeam'
					},
					{
						ico:lxkf,
						title:'联系客服',
						url:'/kefu'
					}
				]
			}
		},
		methods:{
			async loginout(){
				
				try{
					
					const data = await this.$apis.User.logout()
					
					this.$toast(data.info)
					
					setTimeout( () => {
						this.$router.push('/login')
					},1000)
					
				}catch(e){
					//TODO handle the exception
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	
	.logiout{
		width:6rem;
		height:.72rem;
		background:rgba(17,34,58,1);
		opacity:0.6;
		border-radius:.15rem;
		color: #3A627E;
		font-size: .28rem;
		text-align: center;
		line-height: .72rem;
		margin: auto;
		display: block;
		margin-top: .6rem;
		outline: none;
		border: none;
		margin-bottom: 1.5rem;
	}
	
	.mneu_list{
		font-size: .28rem;
		color: #8FE2F8;
		padding-top: 1.57rem;
		background-color: rgb(17,32,56);
		
		.ml_item{
			padding: .22rem .65rem .23rem .62rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #1A304F;
			
			>div{
				display: flex;
				align-items: center;
				
				img{
					margin-right: .2rem;
				}
			}
		}
	
	}
	.user_top{
		position: relative;
		height: 3rem;
			
		img{
			width: 100%;
			position: absolute;
			top: 0;
		}
	}
	
	.user_content{
		width:6.9rem;
		// height:2.8rem;
		padding-bottom: .35rem;
		background:#192D49;
		box-shadow:inset 0px 0px .3rem 0px rgba(28,176,212,1);
		border-radius:.2rem;
		position: absolute;
		top: 1.42rem;
		left: 50%;
		transform: translateX(-50%);
		
		.uc_top{
		padding: .43rem .57rem 0 .58rem;
		box-sizing: border-box;
			display: flex;
			align-items: center;
			font-size: .2rem;
			color: #94E9FF;
			
			>div{
				display: flex;
				align-items: center;
			}
			
			.uct_left,.head{
				width: 1rem;
				height: 1rem;
				border-radius: 50%;
				margin-right: .25rem;
			}
			
			.uct_right{
				
				>div{
					width: 4.4rem;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					>div{
						display: flex;
						align-items: center;
						margin-bottom: .05rem;
						
						img{
							margin-left:.26rem;
							width: .29rem;
							height: .27rem;
						}
					}
				}
			}
			
			.set{
				width:.34rem;
				height: .33rem;
			}
		}
	
		.uc_bottom{
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: .29rem;
			position: relative;
			
			.line{
				width: 1px;
				height: .45rem;
				background-color: #2F4D77;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			
			div{
				color: #94E9FF;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				
				p:nth-child(1){
					margin-bottom: .16rem;
					font-size: .28rem;
				}
				
				p:nth-child(2){
					font-size: .24rem;
				}
				
				.tgsy{
					display: flex;
					align-items: center;
					justify-content: center;
					width:1.43rem;
					height:.35rem;
					box-shadow:inset 0px 0px .3rem 0px rgba(28,176,212,1);
					border-radius:.1rem;
					text-align: center;
					line-height: .35rem;
					
					img{
						width: .15rem;
						height: .22rem;
						margin-left: .05rem;
					}
				}
			}
		}
	}
	
	.user {
		position: position;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: rgb(15,30,52);
		
		/deep/.van-nav-bar {
			 background-color: transparent !important;
		}
	
		/deep/ .van-nav-bar .van-icon {
			color: white !important;
		}
	
		/deep/ .van-nav-bar__title {
			color: white !important;
		}
	
		/deep/ [class*=van-hairline]::after {
			border: none;
		}
	}
</style>
